<template>
  <div>
    <div>
      <el-popover
          :placement="placement"
          width="300"
          trigger="hover">
        <MePac :name="nodeName"></MePac>
        <el-image
            class="me_devm"
            slot="reference"
            :src="require('@/assets/devm.png')"
            @contextmenu.prevent="rightClick">
          <vue-context-menu :contextMenuData="contextMenuData"
                            @newNe="onNewNe"
                            @devm="toDevm"
                            @eqs="toEqs"
                            @xcPac="toXcPac"
                            @pgPac="toPgPac"
                            @alarmMask="toAlarmMask"
                            @tcas="toTcas"
                            @huntMe="onHuntMe"
                            @upload="onUpload"
                            @download="onDownload"
                            @syncC="onSyncC"
                            @syncH="onSyncH">
          </vue-context-menu>
        </el-image>

      </el-popover>

      <br/>
      <div id="mouse" v-if="true" class="version_total"></div>
      <el-button type="text" @click="meFormVisible = true">鼠标停留设备面板 悬浮在设备图上 设备信息</el-button>
      <div v-show="meFormVisible">
        <el-dialog
            :visible.sync="meFormVisible"
            width="500px"
            :close-on-click-modal="false"
            class="me_info">
        </el-dialog>
      </div>
    </div>

    <div>
      <!--  所有弹窗    -->
      <!--  网元：搜索配置   -->
      <el-dialog
          title="创建网元"
          :visible.sync="visibleNewNe"
          width="500px"
          :close-on-click-modal="false"
      >
        <MeParams :name="nodeName"></MeParams>
      </el-dialog>
      <!--  网元：搜索配置   -->
      <el-dialog
          :visible.sync="visibleMatch"
          width="800px"
          :close-on-click-modal="true"
          :destroy-on-close="true"
          :show-close="false"
          class="match_config_dialog">
        <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
          <div style="padding:15px 20px;">{{ huntTitle }}</div>
        </div>
        <MatchConfig/>
      </el-dialog>
      <!--  网元：网元配置上传   -->
      <el-dialog
          :visible.sync="visibleUpload"
          width="460px"
          :close-on-click-modal="true"
          :destroy-on-close="true"
          :show-close="false"
          class="match_config_dialog">
        <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
          <div style="padding:15px 20px;">{{ uploadTitle }}</div>
        </div>
        <UploadFtpFile/>
      </el-dialog>
      <!--  网元：网元配置下载   -->
      <el-dialog
          :visible.sync="visibleDownload"
          width="460px"
          :close-on-click-modal="true"
          :destroy-on-close="true"
          :show-close="false"
          class="match_config_dialog">
        <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
          <div style="padding:15px 20px;">{{ downloadTitle }}</div>
        </div>
        <DownloadFtpFile/>
      </el-dialog>
      <!--  网元：同步当前告警   -->
      <el-dialog
          title="同步当前告警"
          :visible.sync="visibleSyncAlarmC"
          width="380px"
          :close-on-click-modal="false">
        <TipWindows/>
      </el-dialog>
      <!--  网元：同步历史告警   -->
      <el-dialog
          title="同步历史告警"
          :visible.sync="visibleSyncAlarmH"
          width="380px"
          :close-on-click-modal="false">
        <TipWindows/>
      </el-dialog>
    </div>

    <div
        v-show="false"
        id="app"
        @contextmenu="showMenu"
        style="width: 100px;height: 100px;margin: 200px auto;background: red;">
      <vue-context-menu :contextMenuData="contextMenuData" @savedata="savedata" @newdata="newdata"></vue-context-menu>
    </div>
  </div>
</template>

<script>
import MePac from "@/components/dispose/me/MePac";

export default {
  name: "NECenter",
  components: {MePac},
  data() {
    return {
      placement: 'right-end',
      meFormVisible: false,

      //对话框
      //创建设备
      visibleNewNe: false,
      //搜索配置
      visibleMatch: false,
      //网元配置上传
      visibleUpload: false,
      //网元配置下载
      visibleDownload: false,
      //同步当前告警
      visibleSyncAlarmC: false,
      //同步历史告警
      visibleSyncAlarmH: false,

      //对话框标题名称
      //搜索
      huntTitle: '',
      //网元配置上传
      uploadTitle: '',
      //网元配置下载
      downloadTitle: '',

      //设备
      meMenu: [
        {
          fnHandler: "devm",
          icoName: "el-icon-s-ticket",
          btnName: "设备属性"
        },
        {
          fnHandler: "eqs",
          icoName: "el-icon-cpu",
          btnName: "板卡信息"
        },
        {
          fnHandler: "xcPac",
          icoName: "el-icon-share",
          btnName: "交叉配置"
        },
        {
          fnHandler: "pgPac",
          icoName: "el-icon-menu",
          btnName: "保护组管理"
        },
        {
          fnHandler: "alarmMask",
          icoName: "el-icon-close-notification",
          btnName: "告警抑制配置"
        },
        {
          fnHandler: "tcas",
          icoName: "el-icon-takeaway-box",
          btnName: "性能门限"
        },
        {
          fnHandler: "huntMe",
          icoName: "el-icon-search",
          btnName: "搜索配置"
        },
        {
          fnHandler: "upload",
          icoName: "el-icon-upload2",
          btnName: "网元配置上传"
        },
        {
          fnHandler: "download",
          icoName: "el-icon-download",
          btnName: "网元配置下载"
        },
        {
          fnHandler: "syncC",
          icoName: "el-icon-video-pause",
          btnName: "同步当前告警"
        },
        {
          fnHandler: "syncH",
          icoName: "el-icon-video-play",
          btnName: "同步历史告警"
        },

      ],

      // contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: "demo",
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "devm",
            icoName: "el-icon-s-ticket",
            btnName: "设备属性"
          },
          {
            fnHandler: "eqs",
            icoName: "el-icon-cpu",
            btnName: "板卡信息"
          },
          {
            fnHandler: "xcPac",
            icoName: "el-icon-share",
            btnName: "交叉配置"
          },
          {
            fnHandler: "pgPac",
            icoName: "el-icon-menu",
            btnName: "保护组管理"
          },
          {
            fnHandler: "alarmMask",
            icoName: "el-icon-close-notification",
            btnName: "告警抑制配置"
          },
          {
            fnHandler: "tcas",
            icoName: "el-icon-takeaway-box",
            btnName: "性能门限"
          },
          {
            fnHandler: "huntMe",
            icoName: "el-icon-search",
            btnName: "搜索配置"
          },
          {
            fnHandler: "upload",
            icoName: "el-icon-upload2",
            btnName: "网元配置上传"
          },
          {
            fnHandler: "download",
            icoName: "el-icon-download",
            btnName: "网元配置下载"
          },
          {
            fnHandler: "syncC",
            icoName: "el-icon-video-pause",
            btnName: "同步当前告警"
          },
          {
            fnHandler: "syncH",
            icoName: "el-icon-video-play",
            btnName: "同步历史告警"
          },

        ],
      }

    }
  },


  methods: {
    onClick(text) {
      alert(`You clicked ${text}!`);
    },
    rightClick(MouseEvent) {
      console.log(MouseEvent)
      // 鼠标右击触发事件
      this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true

      this.contextMenuData.menulists = this.meMenu;

      // MouseEvent.preventDefault();
      this.contextMenuData.axis.x = MouseEvent.clientX;
      this.contextMenuData.axis.y = MouseEvent.clientY;
      // Get the current location


    },
    showMenu() {
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y
      };
    },
    savedata() {
      alert("保存");
    },
    newdata() {
      alert("New");
    },

    rightShow(item, i) {
      this._setCurrentVideo(item, i);
      // 因为每个不同的数组对象做了标识才有这步
      if (this.rightSign[i].value1) {
        this.contextMenuData.menulists[0].icoName = "iconfont icon-xingxing";
        this.contextMenuData.menulists[0].btnName = "取消关注";
      } else {
        this.contextMenuData.menulists[0].icoName = "iconfont icon-star";
        this.contextMenuData.menulists[0].btnName = "关注";
      }
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      this.contextMenuData.axis = {
        x,
        y
      };
    },
    onMouseOver() {
      this.meFormVisible = true;
      console.log(this.meFormVisible);
    },

    onNewNe() {
      this.visibleNewNe = true;
    },

    toDevm() {
      this.$router.push('/ne_center');
    },
    toEqs() {
      this.$router.push('/ne_center/eqs');
    },

    toXcPac() {
      this.$router.push('/ne_center/me/xcs');
    },
    toPgPac() {
      this.$router.push('/oos/ne_center/pgs');
    },
    toAlarmMask() {
      this.$router.push('/oos/ne_center/alarm&mask');
    },
    toTcas() {
      this.$router.push('/ne_center/tcas');
    },
    onHuntMe() {
      this.visibleMatch = true;
    },
    onUpload() {
      this.visibleUpload = true;
    },
    onDownload() {
      this.visibleDownload = true;
    },
    onSyncC() {
      this.visibleSyncAlarmC = true;
    },
    onSyncH() {
      this.visibleSyncAlarmH = true;
    },


  },
  props: ["nodeName"],
  mounted() {
    this.huntTitle = '搜索设备配置信息：' + this.nodeName;
    this.uploadTitle = '网元配置上传：' + this.nodeName;
    this.downloadTitle = '网元配置下载：' + this.nodeName;
  }


};
</script>

<style scoped>
.me_info {
  text-align: left;
  line-height: 20px;
}

:hover.me_devm {
  color: #8cc5ff;
}

.version_total {
  position: absolute;
  width: 10%;
  height: 5%;
}
</style>